<!--
 * @Author: gao_m3
 * @Date: 2021-09-10 14:49:59
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-27 17:02:26
 * @Descripttion: 
-->
<template>
  <div class="drawer-container">
    <div>
      <h3 class="header">
        根据通用配置中的图片水印开启与否判断图片上传时是否有水印
      </h3>
      <fks-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="url"
        :headers="{ 'Fawkes-Auth': accessToken }"
        :on-success="getImgUrlx"
        :before-upload="beforeAvatarUpload"
      >
        <fks-image
          class="website_avatar"
          :src="logox"
          fit="contain"
        >
          <div
            slot="error"
            class="image-slot"
          >
            <i class="fks-icon-picture-outline" />点击上传
          </div>
        </fks-image>
      </fks-upload>
    </div>
    <div
      class="header"
      style="margin-top: 76px"
    >
      <h3>自定义水印的开启关闭</h3>
      <fks-switch
        v-model="type"
        active-text="开启水印"
        inactive-text="关闭"
        @change="change(type)"
      />
    </div>

    <fks-upload
      class="avatar-uploader"
      :show-file-list="false"
      :action="url"
      :data="data"
      :headers="{ 'Fawkes-Auth': accessToken }"
      :before-upload="beforeAvatarUpload"
      :on-success="getImgUrl"
    >
      <fks-image
        class="website_avatar"
        :src="logo"
        fit="contain"
      >
        <div
          slot="error"
          class="image-slot"
        >
          <i class="fks-icon-picture-outline" />点击上传
        </div>
      </fks-image>
    </fks-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: this.VUE_APP_UPLOAD_IMG_API,
      accessToken: this.$storage.get('access_token'),
      logo: '',
      logox: '',
      data: {},
      type: true,
      type0: {
        isWaterMark: 0
      },
      type1: {
        isWaterMark: 1
      }
    }
  },
  mounted() {
    this.data = { waterMarkJson: JSON.stringify(this.type1) }
  },
  methods: {
    change(type) {
      if (type == 0) {
        this.data = { waterMarkJson: JSON.stringify(this.type0) }
      } else {
        this.data = { waterMarkJson: JSON.stringify(this.type1) }
      }
    },
    getImgUrl(res, file) {
      this.logo = `${this.VUE_APP_DOWNLOAD_IMG_API}?f8s=${res.data.fileToken}`
    },
    getImgUrlx(res, file) {
      this.logox = `${this.VUE_APP_DOWNLOAD_IMG_API}?f8s=${res.data.fileToken}`
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isJPG = file.type == 'image/jpeg'
      if (!isJPG && !isPNG) {
        this.$message.error('只允许上传jpg/jpeg/png格式图片！')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .header {
    margin: 30px;
  }
}

.website_avatar {
  float: left;
  width: 60%;
  min-width: 348px;
  height: 60%;
  min-height: 164px;
  margin-left: 30px;
}

::v-deep .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 348px;
  height: 100%;
  min-height: 164px;
  color: #909399;
  background: #f5f7fa;
}
</style>